<template>
  <div class="market-list">
    <div class="block">
      <div class="tips">
        <p>热卖中</p>
      </div>
      <img class="shop-img" src="@/assets/shop1.png"/>
      <div class="shop-content">
        <span class="content">宝可梦系列</span>
        <span><img class="level" src="@/assets/等级@2x.png" /></span>
        <div class="user">
          <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
          <p class="user-name">杨过</p>
          <el-button size="small">￥533</el-button>
        </div>
      </div>
    </div>
    <div class="block" @click="collection()">
      <div class="tips-no">
        <p>首发售罄</p>
      </div>
      <img class="shop-img" src="@/assets/shop2.png"/>
      <div class="shop-content">
        <span class="content">宝可梦系列</span>
        <span><img class="level" src="@/assets/等级@2x.png" /></span>
        <div class="user">
          <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
          <p class="user-name">杨过</p>
          <el-button class="sale" size="small">￥533</el-button>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="tips-no">
        <p>首发售罄</p>
      </div>
      <img class="shop-img" src="@/assets/shop3.png"/>
      <div class="shop-content">
        <span class="content">宝可梦系列</span>
        <span><img class="level" src="@/assets/等级@2x.png" /></span>
        <div class="user">
          <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
          <p class="user-name">杨过</p>
          <el-button class="sale" size="small">￥533</el-button>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="tips-no">
        <p>首发售罄</p>
      </div>
      <img class="shop-img" src="@/assets/shop4.png"/>
      <div class="shop-content">
        <span class="content">宝可梦系列</span>
        <span><img class="level" src="@/assets/等级@2x.png" /></span>
        <div class="user">
          <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
          <p class="user-name">杨过</p>
          <el-button class="sale" size="small">￥533</el-button>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="tips-no">
        <p>首发售罄</p>
      </div>
      <img class="shop-img" src="@/assets/shop5.png"/>
      <div class="shop-content">
        <span class="content">宝可梦系列</span>
        <span><img class="level" src="@/assets/等级@2x.png" /></span>
        <div class="user">
          <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
          <p class="user-name">杨过</p>
          <el-button class="sale" size="small">￥533</el-button>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="tips-no">
        <p>首发售罄</p>
      </div>
      <img class="shop-img" src="@/assets/shop6.png"/>
      <div class="shop-content">
        <span class="content">宝可梦系列</span>
        <span><img class="level" src="@/assets/等级@2x.png" /></span>
        <div class="user">
          <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
          <p class="user-name">杨过</p>
          <el-button class="sale" size="small">￥533</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MarketList',
  methods: {
    collection () {
      this.$router.push({ name: 'collection' })
    }
  }
}
</script>
<style lang="scss" scoped>
.market-list{
  float: left;
  width: 100%;
  height: auto;
  margin-top: 30px;
  margin-left: 66px;
  margin-bottom: 12px;

  .block {
    float: left;
    width: 380px;
    margin-left: 5px;
    margin-right: 20px;
    margin-bottom: 24px;
    background: #fff;
    border-radius: 14px;

    .tips {
      margin-top: -12px;

      p{
        position: relative;
        width: 76px;
        height: 20px;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        background: #0066ED;
        border-radius: 14px 0px 14px 0px;
        color: #FFFFFF;
        opacity: 1;
        z-index: 10;
      }
    }

    .tips-no {
      margin-top: -11px;

      p{
        position: relative;
        width: 76px;
        height: 20px;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        background: #C5CFD5;
        border-radius: 14px 0px 14px 0px;
        color: #FFFFFF;
        opacity: 1;
        z-index: 10;
      }
    }

    .shop-img{
      width: 398px;
      height: 430px;
      margin-left: -9px;
      margin-top: -38px;
    }

    .shop-content{
      width: 360px;
      height: 86px;
      margin-left: 18px;

      .content {
      font-size: 18px;
      }

      .level {
      width: 14.9px;
      height: 12.08px;
      margin-left: 5px;
      }
      .user {
        padding-top: 14px;

        .avatar {
          img {
          width: 26px;
          height: 26px;
          }
        }

        .el-button {
          width: 66px;
          height: 36px;
          float: right;
          padding-left: 8px;
          margin-right: 16px;
          margin-top: -45px;
          background: #fff;
          border: 2px solid #2C2C34;
          font-size: 16px;
          font-weight: 400;
          color: #2C2C34;
          opacity: 1;
        }

        .sale {
          width: 66px;
          height: 36px;
          float: right;
          padding-left: 8px;
          margin-right: 16px;
          margin-top: -45px;
          background: #E1E1E1;
          border: none;
          font-size: 16px;
          font-weight: 400;
          color: #fff;
          opacity: 1;
        }

        .user-name{
          width: 50px;
          margin-left: 33px;
          margin-top: -25px;
        }
      }
    }
  }
}
</style>
